<template>
  <div>
    <!-- vuex
        作用：状态管理（共享数据管理），它的数据是响应式
        用法：
           state:存储数据的
           mutations：修改state数据的唯一途径
           actions：做一些异步操作，但是它如果要修改state还得通过mutations
           getters:它就是state的计算属性
           modules：模块化处理
             {
              user:{
                namespaced:命名空间，默认false
                state:{
                  username:'张三'
                  访问：this.$store.state.user.username
                },
                mutations:{
                  xxx(){
                    有命名空间：this.$store.commit('user/xxx')
                    没有命名空间：this.$store.commit('xxx')
                  }
                }
                actions:{
                   fn(val){}
                   有命名空间:this.$store.dispatch('user/fn',实参值)
                },
                getters:{
                    getName(state){
                      return ...
                    }
                    .后面的值要符合命名规范
                    有命名空间:this.$store.getters['user/getName']
                }
              }
             }

             持久化插件  vuex-persistedstate
             配制：
                下载
                导入（store/index.js） import persistedstate from 'vuex-persistedstate'
                配制
                   plugins:[
                      persistedstate({
                        paths:['模块名','模块名.属性名']
                      })
                   ]

    -->
    <div>{{ $store.state.user.name }}</div>
    <div>{{ $store.getters['user/getName'] }}</div>
    <button @click="btnClick">调用mutations</button>
  </div>
</template>
<script>
export default {
  methods: {
    btnClick() {
      this.$store.commit('SET_TOKEN', '123')
    }
  }
}
</script>
<style></style>
